<template>
  <div id="app" class="container">
    <!--轮播组件-->
    <div>
      <!--巨幕-->
      <el-carousel trigger="click" style="width: 100%">
        <el-carousel-item
          style="{
            backgroundImage: 'url(' + ~/assets/images/carousel/carousel_01.jpg + ')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center top',
            backgroundSize: 'cover',
          }"
        >
          <div class="jumbotron">
            <div class="bg" style="height: 300px">
              <h1>梦想在心中点燃,创业在脚下实现</h1>
              <div style="margin: 0px auto; width: 50%">
                <el-divider style="width: 600px"></el-divider>
              </div>
              <el-button type="success" round plain>查看详情</el-button>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item
          style="{
            backgroundImage: 'url(' + ~/assets/images/carousel/carousel_02.jpg + ')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center top',
            backgroundSize: 'cover',
          }"
        >
          <div class="jumbotron">
            <div class="bg" style="height: 300px">
              <h1>你我放飞梦想,创业收获希望</h1>
              <div style="margin: 0px auto; width: 50%">
                <el-divider style="width: 600px"></el-divider>
              </div>
              <el-button type="success" round plain>查看详情</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--优秀项目-->
    <div id="good_project" class="container-subject">
      <br />
      <!--文章模块-头部-->
      <el-row>
        <el-col :span="2">
          <span style="font-weight: bolder; color: #444"
            ><i class="el-icon-office-building"></i>优秀项目</span
          >
        </el-col>
        <el-col :span="1" :offset="20">
          <p class="text-right"><a href="javascript:void(0);">更多</a></p>
        </el-col>
      </el-row>
      <!--文章模块-内容-->
      <el-row>
        <el-col
          class="top-course-container"
          span="6"
          v-for="(project, index) in projectLists"
          :key="index"
        >
          <div class="top-course">
            <dl class="item">
              <dt>
                <a href="#"><img :src="project.logo" /></a>
              </dt>
              <dd>
                {{ project.name }}<br />
                <p class="item-footer">
                  <span style="color: #0bbe0b"
                    >{{ project.region }}&nbsp;&nbsp;</span
                  ><span style="color: darkorange"
                    >{{ project.type }}&nbsp;&nbsp;</span
                  ><span style="color: orangered"
                    >{{ project.city }}&nbsp;&nbsp;</span
                  >
                  <span class="pull-right"
                    >关注度<span class="num">{{
                      project.attentionNumber
                    }}</span></span
                  >
                </p>
              </dd>
            </dl>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--创业动态-->
    <div id="startup_news" class="container-subject">
      <br />
      <!--政策宣传-头部-->
      <el-row>
        <el-col :span="2">
          <span style="font-weight: bolder; color: #444"
            ><i class="el-icon-picture-outline"></i>创业动态</span
          >
        </el-col>
        <el-col :span="1" :offset="20">
          <p class="text-right"><a href="javascript:void(0);">更多</a></p>
        </el-col>
      </el-row>

      <div
        class="blog-left"
        v-for="(news, index) in newsList"
        :key="index"
      >
        <article>
          <h4>
            <a href="details.html" target="_blank"
              >{{news.titile}}</a
            >
          </h4>
          <div class="article-title">
            <div class="article-text">
              {{news.summay}}
            </div>
            <div class="article-timer">
              <span> {{news.catalog}}&nbsp;</span><i class="el-icon-date"></i
              ><span>{{news.createTime}}</span>
              <span><i class="el-icon-view"></i>100 </span>
            </div>
          </div>
        </article>
      </div>
    </div>

    <!--政策宣传-->
    <div id="good_policy" class="container-subject">
      <br />
      <!--政策宣传-头部-->
      <el-row>
        <el-col :span="2">
          <span style="font-weight: bolder; color: #444"
            ><i class="el-icon-s-flag"></i>政策宣传</span
          >
        </el-col>
        <el-col :span="1" :offset="20">
          <p class="text-right"><a href="javascript:void(0);">更多</a></p>
        </el-col>
      </el-row>

      <div class="blog-left">
        <article>
          <h4>
            <a href="#" target="_blank"
              >国家对引导国有企业吸纳高校毕业生就业有哪些政策措施？</a
            >
          </h4>
          <div class="article-title">
            <div class="article-text">
              《国务院办公厅关于做好2013年全国普通高等学校毕业生就业工作的通知》（国办201335号）
            </div>
            <div class="article-timer">
              <span>企业就业&nbsp;</span><i class="el-icon-date"></i
              ><span>2021-12-31</span>
              <span><i class="el-icon-view"></i>100 </span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>
<script>
import projectApi from "@/api/project";
export default {
  data() {
    return {
      // 项目赋值
      projectLists: [],
      newsList: [],
    };
  },
  created() {
    this.getProjectList();
  },
  methods: {
    // 获取数据
    getProjectList() {
      projectApi.getProjectList().then((response) => {
        this.projectLists = response.data.projects;
        this.newsList = response.data.newsList;
      });
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  background-color: #fafafa;
}

.container-subject {
  width: 80%;
  background-color: #fafafa;
  margin: 0px auto;
}

/*轮播组件部分样式表*/
.el-carousel__item:nth-child(2n) {
  background-color: #c6e2ff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #c6e2ff;
}

.jumbotron {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}

.bg h1 {
  padding: 0px;
  margin: 60px;
  font-size: 40pt;
  text-shadow: 2px 2px 2px #999999;
  color: #fff;
}

.bg h3 {
  padding: 0px;
  margin: 0px;
  font-size: 20pt;
  color: #fff;
}

/*以下是优秀项目部分样式表*/
.text-right a {
  color: #666;
  text-decoration: none;
  font-size: small;
}

.top-course {
  margin: 10px;
  padding: 0px;
  border: 1px solid #dddddd;
}

.item img {
  width: 100%;
}

.item {
  background: #fff;
  margin: 0px;
}

.item dd {
  position: relative;
  left: -20px;
  height: 50px;
  background: #fff;
  color: #336699;
  font-size: small;
  font-weight: bolder;
}

.item:hover {
  transform: scale(1, 1);
  box-shadow: 0 5px 12px #dddddd;
  cursor: pointer;
}

.item dt {
  overflow: hidden;
}

.item img {
  transition: all 1.1s;
}

.item img:hover {
  transform: scale(1.05);
}

.item-footer {
  font-size: x-small;
  font-weight: normal;
  text-align: end;
  color: #999;
}

/*以下是政策宣传部分样式表*/
.blog-left {
  width: 98%;
  height: 98%;
  margin: 10px 0px 10px 0px;
  padding: 10px 0px 10px 0px;
  background: #fff;
}

.article-title {
  width: 98%;
  display: flex;
  justify-content: space-around;
  margin: 8px 0 8px 0;
}

.article-text {
  width: 65%;
  height: 18px;
  padding-right: 20px;
  text-indent: 2em;
  text-align: left;
  color: #444444;
  font-size: small;
  overflow: hidden;
}

article {
  width: 100%;
  border-bottom: 1px dotted #bbb;
}

.article-timer {
  width: 35%;
  text-align: right;
  color: #ccc;
  font-size: small;
}

.article-pager {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

article h4 {
  margin-left: 20px;
}

article h4 a {
  color: #336699;
  text-decoration: underline;
}
</style>